<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        *{
	    /*初始化 清除页面元素的内外边距*/
	    padding: 0;
	    margin: 0;
	    /*盒子模型*/
	    box-sizing: border-box;
        }
        body {
            background-image: url("image/bello.jpg");  /*引用背景图片*/
            background-repeat: no-repeat;  /*设置是否及如何重复背景图像 no-repeat背景图像将仅显示一次*/
            background-size: 100% 100%;   /*规定背景图像的尺寸*/
            background-attachment: fixed;  /*设置固定的背景图像  fixed:当页面的其余部分滚动时，背景图像不会移动*/
            /*!*根据浏览器水平居中*!*/
            /*display: flex;*/
            /*justify-content: center;  !*对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。 center 项目位于容器中央。*!*/
            /*align-items: center;   !*朝着弹性容器的中央对行打包。*!*/
            /*!*让页面始终占浏览器可视区区域总高度*!*/
            /*height: 100vh;*/
        }
        .main {
            width: 500px;  /*设置元素的宽度*/
            height: 300px;  /*设置元素的高度*/
            box-shadow: 0 5px 20px 0 #e8e8e8;   /*向框添加一个或多个阴影*/
            background-color: white;    /*设置元素的背景颜色*/
            /*规定元素的定位类型*/
            position: absolute;
            left: 0;   /*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移*/
            right: 0;  /*right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移*/
            top: 0;    /*top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
            bottom: 0;  /*bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。*/
            margin: auto;  /*margin 简写属性在一个声明中设置所有外边距属性. auto:浏览器计算外边距。*/
        }
        .main h2 {
            color: #03e9f4;
            margin-left: 160px;
            margin-top: 20px;
        }
        .input input {
            width: 300px;  /*输入边框加长*/
            height: 30px;  /*输入边框大小*/
            border: 1px solid lightblue;   /*输入边框颜色*/
            margin-top: 20px;   /*输入边框间距*/
            outline: none;
        }
        .input {
            margin-left: 50px;   /*整体向右移动*/
            margin-top: 20px;
        }
        .form button {
            width: 120px;    /*登录按钮加长*/
            height: 30px;   /*登录按钮加粗*/
            color: white;   /*登录按钮颜色*/
            background-color: lightblue;
            border-style: none;    /*去掉边框*/
            border-radius: 10px;   /*圆角*/
            font-size: 20px;    /*字体大小*/
            position: absolute;
            bottom: 60px;      /*向下移动*/
            left: 190px;       /*向右移动*/
            outline: none;
            cursor: pointer;    /* 鼠标放上去呈现一个小手 */
        }
    </style>
</head>
<body>

<div class="main">
    <h2>欢迎登录管理系统</h2>
    <form active="" method="post" class="form">
        <div class="input">
            用户名：<input type="text" name="username" required><br>  /*required 是必填字段*/
            密&nbsp&nbsp&nbsp码：<input type="passwoed" name="password" required="required"><br>  /*&nbsp 代表一个空格*/ 
        </div>
        <button type="submit">登录</button>
    </form>
</div>

</body>
</html>